<template>
	<view class="sale-box-page">
		<detail-head url="/pages/sale/sale" type="mine"></detail-head>
		<view class="content">
			<view class="info">
				<view class="title">出售商品</view>
				<view class="prod">
					<image :src="detail.subPctureUrl" mode="aspectFit"></image>
					<view class="detail">
						<view class="name">{{detail.boxName}}</view>
						<view class="item">
							<view class="label">作品编号</view>
							<view class="value">{{detail.blindBoxCode}}</view>
						</view>
						<view class="item">
							<view class="label">链上标识</view>
							<view class="value" @click="$tool.copyText(detail.contractCode)">
								{{setStringStyle(detail.contractCode)}}
							</view>
						</view>
					</view>
				</view>
				<view class="subtitle">单价设置</view>
				<view class="price">
					<input type="number" :value="price" placeholder="输入总价" v-model="price" @input="onInput" />
					<view class="icon">￥</view>
				</view>
				<view class="rate">
					<view class="label">总售价</view>
					<view class="value">￥{{price}}</view>
				</view>
				<view class="rate">
					<view class="label">平台手续费 {{total.procedureFee * 100}}%</view>
					<view class="value">￥{{total.procedureFeeAmount}}</view>
				</view>
				<view class="rate">
					<view class="label">作品版税 {{total.copyrightTax * 100}}%</view>
					<view class="value">￥{{total.copyrightTaxAmount}}</view>
				</view>
				<view class="rate">
					<view class="label">实际到账</view>
					<view class="value">￥{{total.afterTaxAmount}}</view>
				</view>
				<button class="sale-btn" type="default" @click="onToggleMenu(true, 'pwd')">确认出售</button>
			</view>
		</view>
		<uni-popup ref="pwd" type="bottom">
			<view class="popup">
				<view class="value">
					<view class="item" v-for="i in 6">
						<text>{{ !!valArr.val[i-1] ? '*' : '' }}</text>
					</view>
				</view>
				<view class="hint">密码为6位数字</view>
				<numberKeyboard tabBar ref='KeyboarHid' @input='clickInput' :psdLength='valArr.length'>
				</numberKeyboard>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		encryptPWD,
		getUserinfo,
		setStringStyle
	} from '../../utils/utils.js'
	import {
		getBlindBoxDetails
	} from '../../request/blindBox-api.js'
	import {
		boxSale,
		getSellDetails
	} from '../../request/sale-api.js'
	export default {
		data() {
			return {
				user: {},
				// 详情
				detail: {},
				// 价格
				price: '',
				// 总数据
				total: {
					afterTaxAmount: 0,
					procedureFee: 0,
					copyrightTax: 0,
					copyrightTax: 0,
					procedureFee: 0
				},
				setStringStyle,
				// 密码
				smsCode: '',
				// 密码输入框配置
				valArr: {
					val: '',
					length: 6
				},
			}
		},
		watch: {
			smsCode: {
				handler(n) {
					if (n.length === 6) {
						if (encryptPWD(this.smsCode) === this.user.payPassword) {
							this.saleProd()
						} else {
							uni.showToast({
								title: '密码错误！',
								icon: 'none'
							})
						}
						this.onToggleMenu(false, 'pwd')
						this.smsCode = ''
						this.valArr.val = ''
					}
				}
			}
		},
		onLoad(option) {
			this.onloadDetail(option.id)
		},
		mounted() {
			this.user = getUserinfo()
		},
		methods: {
			// popup 切换
			onToggleMenu(show, refName) {
				this.$tool.popupToggle(show, this, refName, 'bottom')
			},
			// input 改变处理
			onInput(e) {
				if (e.detail.value % 1 !== 0) {
					uni.showToast({
						title: '请输入正整数',
						icon: 'none'
					})
					this.price = 0
				} else {
					if (this.price) {
						this.getSaleDetails()
					}
				}
			},
			//输入的值
			clickInput(val) {
				this.valArr.val = val
				this.smsCode = val
			},
			// 加载出售详情
			async getSaleDetails() {
				try {
					let {
						code,
						message,
						data
					} = await getSellDetails(this.price)
					if (code === 200) {
						console.log(data)
						this.total = data
					} else {
						uni.showToast({
							title: message,
							icon: 'error'
						})
					}
				} catch (err) {
					this.$tool.showErr(err)
				}
			},
			// 加载产品详情
			async onloadDetail(id) {
				try {
					let {
						code,
						message,
						data
					} = await getBlindBoxDetails(id)
					if (code === 200) {
						this.detail = data
					} else {
						uni.showToast({
							title: message,
							icon: 'error'
						})
					}
				} catch (err) {
					this.$tool.showErr(err)
				}
			},
			// 出售
			async saleProd(id) {
				if (!this.price) return false
				try {
					let {
						code,
						message,
						data
					} = await boxSale(this.detail.id, this.price)
					if (code === 200) {
						this.total = {
							afterTaxAmount: 0,
							procedureFee: 0,
							copyrightTax: 0,
							copyrightTax: 0,
							procedureFee: 0
						}
						uni.showToast({
							title: '出售成功',
							icon: 'success'
						})
						setTimeout(() => {
							this.$tool.navigateTo('/pages/sale/sale')
						}, 500)
					} else {
						uni.showToast({
							title: message,
							icon: 'error'
						})
					}
				} catch (err) {
					this.$tool.showErr(err)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.sale-box-page {
		width: 100%;
		min-height: 100vh;
		background: $login-background-url no-repeat;
		background-size: 100% 100%;
		background-position: 0 -60rpx;
	}

	.content {
		width: 100%;
		padding: 0 20rpx;
		margin-top: 80rpx;
	}

	.info {
		height: 1152rpx;
		width: 100%;
		padding: 180rpx 40rpx 0 40rpx;
		background: $sale-back-url no-repeat;
		background-size: 100% 100%;
		background-position: 0 0;

		.title {
			line-height: 64rpx;
			text-align: center;
			font-size: 14px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFBD47;
		}

		.subtitle {
			font-size: 16px;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #9D9D9D;
		}

		.prod {
			width: 100%;
			height: 240rpx;
			// padding: 20rpx 0 20rpx 10rpx;
			margin: 40rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			border: 1px solid #979797;
			border-left: none;
			border-right: none;

			image {
				width: 190rpx;
				height: 190rpx;
				margin-right: 20rpx;
			}

			.detail {
				flex: 1;
				height: 200rpx;
				padding: 10rpx 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;

				.name {
					width: 100%;
					text-align: left;
					font-size: 16px;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #9D9D9D;
				}

				.item {
					width: 100%;
					height: 48rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.label {
						width: 120rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #979797;
					}

					.value {
						flex: 1;
						max-width: 320rpx;
						text-align: right;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #979797;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
		}

		.price {
			width: 100%;
			height: 68rpx;
			margin: 20rpx 0;
			border-radius: 16rpx;
			background: linear-gradient(#383838, #050505);
			display: flex;

			input {
				width: 100%;
				height: 100%;
				text-indent: 20rpx;
				color: #979797;
			}

			.icon {
				width: 60rpx;
				height: 100%;
				text-align: center;
				line-height: 64rpx;
				color: #FFBD47;
			}
		}

		.rate {
			margin: 20rpx 0;
			width: 100%;
			height: 48rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.label {
				width: 180rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #979797;
			}

			.value {
				flex: 1;
				max-width: 320rpx;
				text-align: right;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFBD47;
			}
		}

		.sale-btn {
			margin-top: 40rpx;
			color: #FFBD47;
			height: 88rpx;
			background: #121212;
			box-shadow: -10px -10px 20px 0px rgba(39, 39, 39, 0.54), 10px 10px 20px 0px rgba(0, 0, 0, 0.83);
			border-radius: 22px;
			border: 1px solid #FFBD47;
		}
	}

	.popup {
		width: 100%;
		min-height: 300rpx;
		padding: 0 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 0;
		background: #D2D5DB;

		.value {
			display: flex;
			border-radius: 22rpx;
			overflow: hidden;

			.item {
				width: 112rpx;
				height: 94rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #FFFFFF;
				border: 1px solid rgba(151, 151, 151, 0.1);
				font-size: 34px;
				font-family: SFProDisplay-Regular, SFProDisplay;
				font-weight: 400;
				color: #000000;
			}
		}

		.hint {
			margin: 20rpx 0;
		}
	}
</style>
